﻿<template>
    <div class="mui-content boundPhone">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <form class="mui-input-group">
                    <div class="panel-title text1-size color1" v-if="profile.peoplePhone != null && profile.peoplePhone != ''">
                        <span class="text2-size color2">当前手机：</span>
                        <span class="text2-size color1">{{profile.peoplePhone}}</span>
                    </div>
                    <!--手机验证区-->
                    <div class="mui-input-row">
                        <label>手机号:</label>
                        <input placeholder='请输入手机号码' id="phoneInp" type="tel" pattern="[0-9]*" class="mui-input-clear" maxlength="11"  oninput="if(value.length>11)value=value.slice(0,11)"  v-model="peoplePhone">
                        <span class="mui-icon mui-icon-clear mui-hidden" @click="clearPhone()"></span>
                    </div>
                    <div class="mui-input-row codeWrap">
                        <label>验证码:</label>
                        <button type="button" @click="getValidCode($event)" class="mui-btn mui-btn-primary mui-btn-outlined" type="button">获取验证码</button>
                        <input id="VerificationCode"  type="tel" class="mui-input" placeholder="请输入验证码" pattern="[0-9]*" maxlength="4"  oninput="if(value.length>5)value=value.slice(0,5)" v-model="validateCode">
                    </div>
                </form>
                <div class="operateBtn">
                    <button class="mui-btn" id="boundBtn"  disabled="disabled" @click="confirmBound()">确认绑定</button>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    .boundPhone .mui-scroll{top: 44px;}
    /*reg*/
    .boundPhone .panel-title{height: .8rem;  line-height: .8rem;  padding: 0 .3rem;  border-top: 1px solid #e2e2e2;  border-bottom: 1px solid #e2e2e2;  position: relative;  overflow: hidden;}
    .boundPhone .mui-input-group label {width: 26%;  text-align:left; padding: 0.34rem 0.3rem ; font-size: 0.3rem; box-sizing: border-box;}
    .boundPhone .mui-input-row{height:1rem;}
    .boundPhone .mui-input-row label~input,
    .boundPhone .mui-input-row label~select{width: 74%; padding: 0.5rem 0rem; font-size: 0.28rem;}
    .boundPhone  #VerificationCode{width: 48%;box-sizing: border-box; font-size: 0.28rem;}
    .boundPhone .mui-input-row .mui-btn{width: 26%;box-sizing: border-box;right: 0.3rem;padding: 0.15rem 0px;}
    .boundPhone .codeWrap .mui-btn{margin-top: 0.2rem; font-size: 0.28rem;}

    .boundPhone /*StyleSheet*/
    .boundPhone .mui-input-group .mui-input-row {height: 1rem;}
    .boundPhone .mui-input-group .mui-input-row:after {right: 15px;}
    .boundPhone .mui-input-group:after,.mui-input-group:before{background-color: transparent;}
    .boundPhone .mui-input-group:first-child {margin-top: 10px; }

    /*删除按钮*/
    .boundPhone .mui-icon-clear{position: absolute; right: 0px; top: 0.35rem !important; font-size: 0.45rem !important; height: 1rem !important; width: 1rem !important; text-align: center; color: #999; z-index: 1; cursor: pointer;}

</style>

<script type="text/ecmascript-6">
    import Page from '../../base/Page'
    import { API } from '../../config/constants'
    export default new Page({
        vuex:{
            actions:{
                updProfilePhone:function({dispatch},phone){
                    dispatch('UPD_PROFILE_PHONE',phone);
                }
            },
            getters:{
                profile(state) {
                    return state.profile;
                }
            }
        },
        data(){
          return {
              peoplePhone:'',
              validateCode:''
          }
        },
        ready:function () {
            mui('.mui-scroll-wrapper').scroll({
                indicators: true //是否显示滚动条
            });
        },
        methods:{
            //删除手机输入框
            clearPhone:function () {
                this.peoplePhone='';
            },
            //获取验证码
            getValidCode:function (event) {
                //验证手机号
                let that=this;
                let numbers = /^1\d{10}$/;
                let val = that.peoplePhone.replace(/\s+/g,""); //获取输入手机号码
                if(!numbers.test(val) || val.length ==0){
                    mui.toast('请填写正确的手机号');
                    return false;
                }else{
                    //点击一次之后出现60秒倒计时
                    let el = event.currentTarget;
                    let sec =60;
                    for(let  i=0; i<=60; i++){
                        window.setTimeout(function(){
                            if (sec != 0) {
                                el.setAttribute("disabled", true);
                                el.innerText="重新发送(" + sec + ")";
                                sec--;
                            } else {
                                //如果倒计时结束就让  获取验证码显示出来
                                sec = 60;
                                el.removeAttribute("disabled");
                                el.innerText="获取验证码";
                            }
                        }, i * 1000)
                    };

                    //访问接口数据
                    this.getJSON(API.GET_VALID_CODE, {phone:this.peoplePhone}, res => {
                        console.log(res);
                    });
                }
            },
            //确认绑定
            confirmBound:function () {
                let that = this;
                this.post(API.POST_PEOPLE_BIND, {peoplePhone:that.peoplePhone, validateCode:that.validateCode}, res => {
                    if(res.result==true){
                        this.updProfilePhone(that.peoplePhone);
                        this.$route.router.go('/tip/success/confirmBound')
                    }else{
                        mui.toast('验证码不正确，请重新输入');
                    }
                });
            }
        },
        watch:{
            validateCode: function( val ){
                if (val.length==4){
                    mui('#boundBtn')[0].removeAttribute("disabled");
                    mui('#boundBtn')[0].classList.add('mui-btn-primary');
                }else {
                    mui('#boundBtn')[0].setAttribute("disabled", true);
                    mui('#boundBtn')[0].classList.remove('mui-btn-primary');
                }
            },
            peoplePhone:function (val) {
                if (val.length!=0){
                    mui('.mui-icon-clear')[0].classList.remove('mui-hidden');
                }else {
                    mui('.mui-icon-clear')[0].classList.add('mui-hidden');
                }
            }

        },
        components:{

        }

    });

</script>